<!-- 自提点核销优惠券 -->
<template>
  <div id="writeOffCodePage">
    <c-title :hide="false" text="优惠券核销"></c-title>
    <div style="margin:1rem 0;">
      <van-cell-group inset>
        <van-cell v-for="(item,index) in list" :key="index" :title="item.name" :value="item.value"/>
      </van-cell-group>
    </div>
    <div style="margin: 1rem;">
      <van-button type="primary" round block v-if="!used" @click="onClick">确认核销</van-button>
    </div>

    <van-popup v-model="showDeliverList" round :close-on-click-overlay="false"	position="bottom" :style="{ height: '70%' }" >
      <div style="height: 100%; display: flex; flex-direction: column;">
        <van-nav-bar title="选择其中一个" right-text="确定选择" @click-right="selectDeliver" />
        <div class="radio_main" :class="{'activeSelect': item.id == selectDeliverId}" v-for="item in deliverList" :key="item.id" @click.stop="selectDeliverItem(item.id)">
          <div class="title">
            <span class="text">{{ item.deliver_name }}</span>
            <span class="btn1" v-show="item.id == selectDeliverId">已选择</span>
          </div>
          <div class="address">{{ item.full_address }}</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data () {
    return {
      selectDeliverId: null,
      showDeliverList: false,
      deliverList: [],//当前账号所属自提点
      list: [],
      used: 1
    };
  },

  created() {
    this.getDeliverList();
    // this.getData();
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    async getDeliverList() {
      let _parame = {};
      let { msg, result, data } = await $http.get('plugin.package-deliver-write-off.frontend.controllers.write-off.clerk-delivers', _parame, ".");
      if (result == 0) {
        return this.$dialog.alert({
          title: '提示',
          message: msg,
        });
      }
      if (data.list.length == 0) {
        return this.$dialog.alert({
          title: '提示',
          message: '当前账号没有核销权限/绑定站点，请核实！',
        });
      }
      this.selectDeliverId = data.list[0].id;
      this.deliverList = data.list;
      this.showDeliverList = true;
    },
    selectDeliverItem(id) {
      this.selectDeliverId = id;
    },
    selectDeliver() {
      this.showDeliverList = false;
      this.getData();
    },
    async getData() {
      let _parame = {
        id: this.selectDeliverId,
        coupon_id: this.$route.params.coupon_id,
        check: this.$route.query.check
      };
      let { msg, result, data } = await $http.get('plugin.package-deliver-write-off.frontend.controllers.write-off.write-off-page', _parame, ".");
      if (result == 0) {
        return this.$toast(msg);
      }
      this.list = data.info;
      this.used = data.used;
      if(this.used) {
        this.$dialog.alert({
          message: '该优惠券已核销过',
        });
      }
    },
    async onClick(){
      let _parame = {
        id: this.selectDeliverId,
        coupon_id: this.$route.params.coupon_id,
        check: this.$route.query.check
      };
      let { msg } = await $http.get('plugin.package-deliver-write-off.frontend.controllers.write-off.write-off', _parame, ".");
      this.$dialog.alert({
        message: msg,
      }).then(() => {
        // on close
        this.getData();
      });
    }
  }
};

</script>
<style lang='scss' rel='stylesheet/scss' scoped>
#writeOffCodePage{
  text-align: left;

  .radio_main {
    margin: 0.25rem;
    padding: 0.875rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #666;
    font-size: 12px;
    border-radius: 8px;
    border: 1px solid #f5f5f5;

    .title {
      display: flex;
      justify-content: space-between;
      font-size: 1rem;
      flex: 1;
      line-height: 1.25rem;
      margin-bottom: 0.5rem;

      .text {
        color: #333;
        flex: 1;
      }

      .btn1 {
        color: #fff;
        border-radius: 1rem;
        font-size: 12px;
        padding: 0 0.875rem;
        background: #f15353;
      }
    }

    .address {
      line-height: 1rem;
      overflow: hidden; /* 超出部分隐藏 */
      text-overflow: ellipsis; /* 超出部分显示省略号 */
      white-space: nowrap; /* 规定段落中的文本不进行换行 */
    }
  }
  .activeSelect {
    border: 1px solid #f15353;
  }
}
</style>